<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #menuUL{
            display: flex;
        }
        #menuUL li{
            list-style: none; /*去除圆点*/
            width: 150px;
            padding: 20px;
            text-align: center;
            cursor: pointer;/*鼠标样式为手形*/
            position: relative;
        }

        #menuUL li:hover{
            background-color: yellow;
            color: red;
        }

        .lidiv{
            width: 190px;
            height: 0px;
            overflow: hidden;
            position: absolute;
            left: 0px;
            top: 60px;
            background-color: yellow;
            transition: height .3s;
        }

        #menuUL li:hover  .lidiv{
            height: 150px;
        }
    </style>
</head>
<body>
    <div style="text-align: center">
        <ul id="menuUL">
            <li>新闻
                <div class="lidiv">
                    新一代飞艇欲征服天空<br>
                    中共二十大开幕<br>
                    神舟十六号发射<br>
                </div>
            </li>
            <li>财经
                <div class="lidiv">
                    国有银行清理僵尸帐户<br>
                    18元的西瓜？抢钱呀！<br>
                    油价又要涨？<br>
                </div>
            </li>
            <li>体育
                <div class="lidiv">
                    热火进总决赛<br>
                    东南北成足球先生<br>
                    周琦是软蛋，哪个球队要？<br>
                </div>
            </li>
            <li>娱乐
                <div class="lidiv">
                    蔡徐坤能进CBA吗？<br>
                    吴亦凡能出来吗？<br>
                    盘点吸毒明星<br>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>